<template>
    <div v-if="UserStore.userinfo.UseName"> 
        <h3>门店列表</h3>
        <hr>
        <input type="button" value="增加" class="btn btn-primary" @click="add"><br>
        门店名称:<input type="text" v-model="querinfo.shopName">
        开业时间：<input type="date" v-model="querinfo.date1">
        <input type="button" value="查询" @click="show" class="btn btn-primary">
        <input type="button" value="批量删除" @click="delAll" class="btn btn-danger">
        <input type="button" value="批量启用" @click="updateAllState(1)" class="btn btn-priamry">
        <input type="button" value="批量禁用" @click="updateAllState(2)" class="btn btn-warning">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox" v-model="checked" @click="checkAll">
                    </td>
                    <td>Id</td>
                    <td>门店名称</td>
                    <td>分店名称</td>
                    <td>门店图片</td>
                    <td>门店状态</td>
                    <td>门店开业时间</td>
                    <td>门店特色</td>
                    <td>介绍</td>
                    <td>位置</td>
                    <td>类型</td>
                    <td>操作</td>
                </tr>

                <tr v-for="item in data.list">
                    <td>
                        <input type="checkbox" v-model="ids" :value="item.Id" @change="checkOne">
                    </td>
                    <td>{{ item.Id }}</td>
                    <td>{{ item.ShopName }}</td>
                    <td>{{ item.BranchName }}</td>
                    <td>
                        <img :src="item.Photo" width="100" height="100">
                    </td>
                    <td>{{ item.State == 1 ? "启用" : "禁用" }}</td>
                    <td>{{ moment(item.BeginTime).format("YYYY-MM-DD") }}</td>
                    <td>{{ item.Feature }}</td>

                    <td>{{ item.Desc }}</td>
                    <td>{{ item.Name }}</td>
                    <td>
                        <span v-if="item.ShopType == 1">普通酒店</span>
                        <span v-if="item.ShopType == 2">三星酒店</span>
                        <span v-if="item.ShopType == 3">五星酒店</span>
                        <span v-if="item.ShopType == 4">电竞酒店</span>
                        <span v-if="item.ShopType == 5">商务酒店</span>
                        <span v-if="item.ShopType == 6">民宿酒店</span>
                    </td>
                    <td>
                        <input type="button" value="详情" @click="detail(item.Id)" class="btn btn-primary">
                        <input type="button" value="修改" @click="update(item.Id)" class="btn btn-success">
                        <input type="button" value="删除" @click="delone(item.Id)" class="btn btn-danger">
                        <input type="button" v-if="item.State == 1" value="禁用" class="btn btn-warning"
                            @click="updateState(item.Id, 2)">
                        <input type="button" v-if="item.State == 2" value="启用" class="btn btn-warning"
                            @click="updateState(item.Id, 1)">

                    </td>
                </tr>
            </tbody>
        </table>

        <!-- 分页 -->
        <span>共<b>{{ data.totalCount }}</b>条,</span>
        <span>每页<b>{{ querinfo.pageSize }}</b>条,</span>
        <span>当前第<b>{{ querinfo.pageIndex }}/{{ data.totalPage }}</b>页</span>

        <select v-model="querinfo.pageSize" @change="show">
            <option :value="item" v-for="item in arr" :key="item">每页{{ item }}条</option>
        </select>

        <input type="button" value="首页" @click="goPage(1)">
        <input type="button" value="下一页" @click="goPage(querinfo.pageIndex + 1)">
        <span v-for="item in data.totalPage" @click="goPage(item)">{{ item }}</span>
        <input type="button" value="上一页" @click="goPage(querinfo.pageIndex - 1)">
        <input type="button" value="尾页" @click="goPage(data.totalPage)">

        <input type="number" v-model="querinfo.pageIndex">
        <input type="button" value="跳转" @click="goPage(querinfo.pageIndex)" class="btn btn-warning">

    </div>
    <div v-else>
        请登录
    </div>
</template>

<script setup lang="ts">

import axios from 'axios';
import { ref, reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import moment from 'moment';
const route = useRoute();
const router = useRouter();


import{UseUserStore}from '../../stores/user'
const UserStore=UseUserStore();

//数据---------------------------------------------------------------
//获取门店列表参数
let querinfo = reactive({
    pageIndex: 1,
    pageSize: 2,
    shopName: "",
    date1: ""
})
//存储门店
let data: any = reactive({
    list: [],
    totalCount: "",
    totalPage: ""

})
//页容量
let arr = ref(
    [2, 4, 6, 8, 10]
)

//声明一个变量控制复选框选没选中
let checked = ref();
//声明多个变量控制复选框选没选中
let ids = ref([]);




//生命周期------------------------------------------------------------
onMounted(() => {
    getList();
})


//函数----------------------------------------------------------------
//详情
const detail=(id:any)=>{
    router.push({
        path:"/shopDetail",
        query:{
            id:id
        }
    })
}
//修改跳转
const update=(id:any)=>{
    
    router.push({
        path:'/shopUpdate',
        query:{
            id:id
        }
    })
}


//单个删除
const delone=(id:any)=>{
    if (confirm('确定删除吗')) {
        axios({
            method: "delete",
            url: "/api/Shops/DelAllShop",
            params: {
                ids: id
            }
        })
            .then(res => {
                if(res.data>0){
                    alert('删除成功');
                    checked.value=false;
                    getList();
                }
                else{
                    alert('删除失败');
                    checked.value=false;
                }
            })
            .catch(err => {
                console.log(err);
            })
    }
}


//批量修改状态
const updateAllState=(stte:any)=>{
    if (ids.value.length == 0) {
        alert('必选一项')
        return;
    }
    if (confirm('确定要修改状态吗')) {
        axios({
            method:"put",
            url:"/api/Shops/UpdateStateAll",
            params:{
                ids:ids.value.toString(),
                state:stte
            }
        })
        .then(res=>{
            if(res.data>0){
                alert('修改成功');
                checked.value=false;
                ids.value=[];
                getList();
            }
            else{
                alert('修改失败');
            }
        })
        .catch(err=>{
            console.log(err);
        })
    }
}


//批量删除
const delAll = () => {
    if (ids.value.length == 0) {
        alert('必选一项')
        return;
    }
    if (confirm('确定删除吗')) {
        axios({
            method: "delete",
            url: "/api/Shops/DelAllShop",
            params: {
                ids: ids.value.toString(),
            }
        })
            .then(res => {
                if(res.data>0){
                    alert('删除成功');
                    checked.value=false;
                    getList();
                }
                else{
                    alert('删除失败');
                    checked.value=false;
                }
            })
            .catch(err => {
                console.log(err);
            })
    }
}


//全选 全不选
const checkAll = () => {
    checked.value = !checked.value
    if (checked.value == true) {
        ids.value = data.list.map((item: any) => {
            return item.Id;
        });
    }
    else {
        ids.value = [];
    }
}
//反选
const checkOne = () => {
    if (ids.value.length == data.list.length) {
        checked.value = true;
    }
    else {
        checked.value = false;

    }

}
//单个修改状态
const updateState = (id: any, state: any) => {
    if (confirm('确定修改吗')) {
        axios({
            method: "put",
            url: "/api/Shops/UpdateShopState",
            params: {
                id: id,
                state: state,
            }
        })
            .then(res => {
                if (res.data > 0) {
                    alert('修改成功');
                    getList();
                   
                }
                else{
                    alert('删除失败');
                    return;
                }
            })
            .catch(err => {
                console.log(err);
            })

    }
}
//查询
const show = () => {
    querinfo.pageIndex = 1;
    getList();
}
//分页
const goPage = (num: any) => {
    if (num < 1) {
        querinfo.pageIndex = 1;
        return;
    }
    if (num > data.totalPage) {
        querinfo.pageIndex = data.totalPage;
        return;
    }
    querinfo.pageIndex = num;
    getList();
}
//获取门店列表数据
const getList = () => {
    axios({
        method: "get",
        url: "/api/Shops/GetShopList",
        params: querinfo,
    })
        .then(res => {
            console.log(res);
            data.list = res.data.list;
            data.totalCount = res.data.totalCount;
            data.totalPage = res.data.totalPage;
        })
        .catch(err => {
            console.log(err)
        })
}



//跳转到增加页面
const add = () => {
    router.push('/shopAdd')
}


</script>



<style scoped>
span {
    margin: 0 5px;
}

b {
    color: red;
}

input {
    margin: 0 7px;
}
</style>